<template>
    <div>
        <div>
            <div v-for="item in ordersList" :key="item.id" class="order-list-box">
                <div class="order-status display-flex">
                    <div class="font-16-333" @click="ToTaskListContent(item)">
                        <span><img src="@/assets/image/user@2x.png" alt="" /></span>
                        <span>{{ item.customerName }}</span>
                    </div>
                    <div class="font-12-3ab0a2">{{ item.appointmentTime }}</div>
                </div>
                <div class="display-flex order-status-bottom">
                    <div class="display-flex">
                        <div class="order-img" @click="ToTaskListContent(item)">
                            <ImageView :imgSrc="item.imgSrc" :emptyHolder="true"/>
                        </div>
                        <div class="order-info" @click="ToTaskListContent(item)">
                            <div class="font-14-333">{{ item.serviceName }}</div>
                            <div class="mt10">
                                <div
                                    v-for="spec in JSON.parse(item.serviceDetail).selections"
                                    :key="spec.id"
                                    class="font-12-3ab0a2 specifications-box m-r-15"
                                >
                                    {{ spec.selection }}
                                </div>
                            </div>
                            <div class="font-12-666">{{ item.address }}</div>
                        </div>
                    </div>
                    <div class="order-number-price">
                        <div class="font-12-666">x{{ item.amount }}</div>
                        <div class="font-18-333 mt20">
                            ￥
                            <span>{{ item.salary }}</span>
                        </div>
                    </div>
                </div>
                <div class="display-flex">
                    <div class="order-number-box" @click="ToTaskListContent(item)">
                        {{ t('taskList.orderId') }}{{ item.orderId }}
                    </div>
                    <div class="operation-box">
                        <el-button class="but_cancel" size="small">{{ t('taskList.contactCustomer') }}</el-button>
                        <el-button class="but_cancel" size="small" @click="orderCancel(item)">
                            {{ t('taskList.cancelOrder') }}
                        </el-button>
                        <el-button size="small" @click="orderSuccess(item)">{{ t('taskList.completeOrder') }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <ElPagination
            class="mt20"
            :pageSize="getListParams.size"
            layout="total, prev, pager, next"
            :total="total"
            @currentChange="handleCurrentChange"
        ></ElPagination>
    </div>
</template>

<script lang="ts" setup>
import { ExtractPropTypes, reactive, ref, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { debounce } from '@/utils/utils';
import { getpagedoTask, getpageQueryTaskList } from '@/api/api.query.util';
import { ElMessage } from 'element-plus';
import { t } from '@/i18n';
import ImageView from '@/components/ImageView.vue'

const router = useRouter();
const ordersList: Ref<Array> = ref([]);
const total: Ref<number> = ref(0);
const getListParams = reactive({
    current: 1,
    size: 10,
});
function ToTaskListContent(item) {
    router.push({ name: '/home/task-list/details', query: { id: item.id, employeeId: item.employeeId } });
}

function orderSuccess(item) {
    debounce(() => {
        getpagedoTask({
            method: 'POST',
            data: reactive({
                action: 'finished',
                id: item.id,
            }),
        }).then((res) => {
            ElMessage({
                message: t('taskList.completeOrder'),
                type: 'success',
            });
            getOrders();
        });
    }, 500);
}
function orderCancel(item) {
    debounce(() => {
        getpagedoTask({
            method: 'POST',
            data: reactive({
                action: 'cancel',
                id: item.id,
            }),
        }).then((res) => {
            ElMessage({
                message: t('taskList.cancelOrder'),
                type: 'success',
            });
            getOrders();
        });
    }, 500);
}
getOrders();
function getOrders() {
    getpageQueryTaskList({
        method: 'POST',
        data: getListParams,
    }).then((res) => {
        ordersList.value = res.result.records || [];
        total.value = res.result.total;
    });
}
function handleCurrentChange(current: number) {
    getListParams.current = current;
    getOrders();
}
</script>

<style scoped>
.order-list-box {
    padding: 15px 30px;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.order-status {
    width: 100%;
    height: 30px;
}

.font-16-333 {
    width: 500px;
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.font-16-333 > span > img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

.font-14-333 {
    color: #3ab0a2;
    font-size: 14px;
}

.font-12-333 {
    color: #333333;
    font-size: 12px;
}

.font-18-333 {
    color: #c7000b;
    font-size: 12px;
}

.font-18-333 span {
    font-size: 18px;
}
.display-flex {
    display: flex;
    justify-content: space-between;
}
.order-info {
    width: 500px;
    cursor: pointer;
}
.order-info .font-12-3ab0a2 {
    color: #666666;
    font-size: 12px;
    letter-spacing: 0px;
}

.font-12-666 {
    color: #666666;
    font-size: 12px;
}

.order-img {
    width: 75px;
    cursor: pointer;
}
.order-img img {
    height: 60px;
    width: 60px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color-transparent);
    object-fit: cover;
}

.mt10 {
    display: flex;
    margin: 10px 0;
    text-align: center;
}

.mt20 {
    margin-top: 20px;
}

.text-r {
    text-align: right;
}

.text-l {
    text-align: left;
}

.width-50 {
    width: 50px;
}

.specifications-box {
    height: 16px;
    font-size: 12px;
    letter-spacing: 2px;
    border-radius: 4px;
    border: solid 1px var(--border-color);
    padding: 0 6px;
}

.m-r-15 {
    margin-right: 15px;
}

.order-number-box {
    width: 500px;
    color: #333333;
    font-size: 12px;
    line-height: 32px;
    cursor: pointer;
}

.order-status-bottom {
    height: 70px;
}
.operation-box {
}

.order-number-price {
    width: 50px;
    text-align: right;
}
.but_cancel {
    color: var(--text-secondary);
}
</style>
